<template>
	<view class="my-m-box">
		<view class="item" v-for="item in myList" :key="item.id">
			<view class="top-info">
				<image :src="item.avatar" class="img" mode=""></image>
				<view class="txt">
					{{item.userName}}<text class="time">{{item.createTime}}</text>
					<!-- setTime(item.createTime) -->
				</view>
			</view>
			<view class="title">
				{{item.describ}}
			</view>
			<!-- <image :src="item.firstPagePic" class="big" :webp="imgType(item.firstPagePic)" mode=""></image> -->
			<uni-swiper-dot :info="item.showImgList" :current="current" field="content" :mode="mode" :selectedBackgroundColor="'#666666'">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(img ,index) in item.showImgList" :key="index">
						<view class="swiper-item">
							<view class="switch-list">
								<image :src="img" class="big" mode=""></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="hr"></view>
			<view class="num">
				{{item.useCount ? item.useCount : 0}} 人使用
			</view>
		</view>
		<empty @reload="getList" v-if="!myList.length && show"/>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import {getQueryMyShow} from "@/api/buyer.js"
	import {getElapsedTime} from "@/utils/tool.js"
	export default {
		components:{
			empty
		},
		data() {
			return {
				myList: [],
				current: 0,
				mode: 'default',
				show: false
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			imgType(url){
				if(url && url.indexOf('.webp') >-1) {
					return true
				}else{
					return
				}
			},
			getInfo(){
				getQueryMyShow().then((res) => {
					// this.myList = res
					let data = res
					let arr = []
					data.map((ele) => {
						ele.showImgList = ele.showImg ? ele.showImg.split(',') : []
						arr.push(ele)
					})
					this.myList = arr
					this.show = true
				})
			},
			setTime(val){
				return getElapsedTime(val)
			},
			change(e){
				this.current = e.detail.current;
			},
		}
	}
</script>

<style lang="less" scoped>
.my-m-box{
	padding-top: 32rpx;
	padding-bottom: 50rpx;
	.item{
		margin: 0 32rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 40rpx;
		margin-bottom: 32rpx;
	}
	.top-info{
		display: flex;
		align-items: center;
		.img{
			width: 64rpx;
			height: 64rpx;
			border: 2rpx solid #F3ECEF;
			border-radius: 50%;
			margin-right: 12rpx;
		}
		.txt{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			flex: 1;
			.time{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
				float: right;
			}
		}
	}
	.title{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}
	.swiper-box{
		height: 466rpx;
	}
	
	.big{
		width: 622rpx;
		height: 416rpx;
		margin-top: 24rpx;
		border-radius: 40rpx;
	}
	.hr{
		height: 1rpx;
		background-color: #F1F3F4;
		margin-top: 38rpx;
	}
	.num{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 28rpx;
		text-align: right;
	}
}
/deep/.uni-swiper__dots-box{
	// display: none !important;
	bottom: 2rpx !important;
}
</style>
